<template>
    <div class="back_contain_n mine-account">
        <div class="title">客户订单及销售额年/月度排名</div>
        <div class="Search_Top_Part">
            <el-form inline="true">
                <el-form-item label="">
                    <div class="search_bt">
                        <div class="radioBox">
                            <div class="radioItem" :class="value2 == '按年'? 'radioItemActive' :'' "
                                @click="handleRadio('按年')">按年</div>
                            <div class="radioItem" :class="value2 == '按月'? 'radioItemActive' :'' "
                                @click="handleRadio('按月')">按月</div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="">
                    <el-form-item label="">
                        <el-select v-model="year" placeholder="" @change="hancleChange" class="formItem">
                            <el-option v-for="item in yearsList" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="">
                    <el-select v-model="month" placeholder="按月查询" class="formItem" :disabled="value2=='按年'">
                        <el-option label="1月" value="01"></el-option>
                        <el-option label="2月" value="02"></el-option>
                        <el-option label="3月" value="03"></el-option>
                        <el-option label="4月" value="04"></el-option>
                        <el-option label="5月" value="05"></el-option>
                        <el-option label="6月" value="06"></el-option>
                        <el-option label="7月" value="07"></el-option>
                        <el-option label="8月" value="08"></el-option>
                        <el-option label="9月" value="09"></el-option>
                        <el-option label="10月" value="10"></el-option>
                        <el-option label="11月" value="11"></el-option>
                        <el-option label="12月" value="12"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <div class="search_bt">
                        <span class="zll-search" @click="getList">搜索</span>
                        <span @click="exportExcel" class="zll-search edit" style="margin-left: 20px"><i
                                class="el-icon-download"></i>
                            下载</span>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div v-if="flag">
            <div class="dateBox">
                <div>年度：{{ displayYear }}</div>
                <div v-if="value2 === '按月'">月份：{{ displayMonth }}</div>
                <div>查询时间：{{ queryDate }}</div>
            </div>

            <div class="echartsBox">
                <MyEcharts :params="tableData"></MyEcharts>
            </div>

            <div class="infoBox">
                <div class="infoBox_left">
                    <div class="infoBox_left_title">
                        <img src="@/assets/back_manage_img/ddsl.png" alt="">
                        订单数量
                    </div>
                    <div v-for="(item, index) in orderRank.top3" :key="'top'+index">
                        <span>第{{index+1}}名：</span>
                        <span>{{item.customer}}，<span
                                style="font-weight: bold;color: #1296DB !important">{{formatNumber(item.totalNum)}}（万支）</span></span>
                    </div>
                    <div v-if="orderRank.last1 && orderRank.last1.length > 0">
                        <span class="label">最少：</span>
                        <span>{{orderRank.last1[0].customer}}，<span
                                style="font-weight: bold;color: #1296DB !important">{{formatNumber(orderRank.last1[0].totalNum)}}（万支）</span></span>
                    </div>
                </div>
                <div class="infoBox_right">
                    <div class="infoBox_right_title">
                        <img src="@/assets/back_manage_img/ddje.png" alt="">
                        订单金额
                    </div>
                    <div v-for="(item, index) in priceRank.top3" :key="'price-top'+index">
                        <span>第{{index+1}}名：</span>
                        <span>{{item.customer}}，<span
                                style="font-weight: bold;color: #E16531 !important">{{formatNumber(item.totalPrice)}}（元）</span></span>
                    </div>
                    <div v-if="priceRank.last1 && priceRank.last1.length > 0">
                        <span class="label">最少：</span>
                        <span>{{priceRank.last1[0].customer}}，<span
                                style="font-weight: bold;color: #E16531 !important">{{formatNumber(priceRank.last1[0].totalPrice)}}（元）</span></span>
                    </div>
                </div>
            </div>

            <div class="zll-table">
                <el-table :data="tableData" style="width: 100%" border v-loading="tableLoading">
                    <el-table-column label="客户名称" prop="customer" align="center"></el-table-column>
                    <el-table-column label="数量(万支)" prop="totalNum" align="center"></el-table-column>
                    <el-table-column label="数量排名" prop="numRanking" align="center"></el-table-column>
                    <el-table-column label="金额(元)" prop="totalPrice" align="center"></el-table-column>
                    <el-table-column label="金额排名" prop="priceRanking" align="center"></el-table-column>
                </el-table>
            </div>
        </div>
        <div v-else>
            <div class="empty">
                <img src="@/assets/back_manage_img/zwsj.png" />
                请输入条件进行查询
            </div>

        </div>
        <form action="/jinl/orderStatistics/exportOrderAndSalesRanking" method="post" style="display: none;"
            ref="downloadContentFile">
            <input name="queryJson" :value="queryJson" />
        </form>
    </div>
</template>

<script>
    import MyEcharts from "./myEcharts.vue";
    import { getStore } from "@/plugins/localStore";
    export default {
        components: { MyEcharts },
        data() {
            return {
                displayYear: '',
                displayMonth: '',
                queryDate: '',
                queryJson: '',
                year: '',
                month: '',
                yearsList: [],
                value2: '按年',
                value: '',
                tableData: [],
                tableLoading: false,
                flag: false,
                orderRank: {
                    top3: [],
                    last1: []
                },
                priceRank: {
                    top3: [],
                    last1: []
                }
            };
        },
        methods: {
            getList(startIndex, pageRow) {
                const today = new Date();
                this.queryDate = `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;
                this.displayYear = this.year;
                this.displayMonth = this.month;
                let params = {};
                if (this.value2 == '按年') {
                    params = { startTime: this.year }
                } else {
                    params.startTime = this.year + '-' + this.month;
                }
                let self = this;
                self.flag = true;
                self.tableLoading = true;
                self.$http({
                    url: "/jinl/orderStatistics/OrderAndSalesRanking",
                    method: "post",
                    data: JSON.stringify(params),
                    dataType: 'json',
                    contentType: "application/json",
                }).then(resp => {
                    if (resp.success) {
                        self.tableLoading = false;
                        self.tableData = resp.result.tableData;
                        if (resp.result.orderRank) {
                            self.orderRank = resp.result.orderRank;
                        }
                        if (resp.result.priceRank) {
                            self.priceRank = resp.result.priceRank;
                        }

                    }
                });

            },
            exportExcel() {
                let user = getStore();
                let self = this;
                let queryForm = {
                    year: this.year,
                    name: user.userName,
                };
                queryForm.name = encodeURIComponent(queryForm.name);
                self.queryJson = JSON.stringify(queryForm);
                self.$nextTick(() => {
                    self.$refs.downloadContentFile.submit();
                })
            },
            formatNumber(num) {
                if (!num) return '0';
                return parseFloat(num).toLocaleString('zh-CN', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            },
            handleRadio(val) {
                this.value2 = val;
            },
            hancleChange() {
                this.getList();
            },
            getRecentYears(count) {
                const current = new Date().getFullYear();
                return Array.from({ length: count }, (_, i) => (current - (count - 1) + i));
            },
        },
        mounted() {
            let self = this;
            // self.getList();
        },
        created() {
            this.yearsList = this.getRecentYears(3);
            this.year = this.yearsList[this.yearsList.length - 1];
        },
    };
</script>

<style lang="scss" scoped>
    @import "@/style/SearchTop.scss";

    .title {
        font-size: 24px;
        text-align: center;
        margin-bottom: 30px;
    }

    .formItem {
        ::v-deep .el-input__inner {
            width: 200px !important;
            text-align: center;
        }

    }

    .search_bt {
        height: 40px;
        display: flex;
        align-items: center;
    }

    .dateBox {
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-left: 15px;
        color: #666;
        margin-top: 10px;
        margin-bottom: 20px;

        div {
            margin-right: 100px;
        }
    }

    .echartsBox {
        width: 100%;
    }

    .zll-table {
        margin-top: 50px;

        .el-table th {
            font-size: 12px;
        }

        .el-table__cell {
            .el-tag {
                width: 60px;
                height: 26px;
                line-height: 26px;
                padding: 0;

                &.cancel_tag {
                    background: #fff;
                    border-color: #eee;
                    color: #ccc;
                }
            }
        }

        &.inspect-box_table {
            .el-table .cell {
                span {
                    &.ws {
                        margin: 0 1px;
                        color: #4caf50;
                    }

                    &.abnormal1 {
                        color: #fb2516;
                    }

                    &.abnormal2 {
                        color: #fb2516;
                    }
                }
            }
        }
    }

    .radioBox {
        display: flex;
        align-items: center;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 1px 2px 1px 2px;
        height: 26px;
        line-height: 26px;

        .radioItem {
            height: 20px;
            line-height: 20px;
            width: 95px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
        }

        .radioItemActive {
            background: #00D1D0;
            color: #fff;
        }
    }

    .infoBox {
        display: flex;
        justify-content: space-around;

        .infoBox_left,
        .infoBox_right {
            /* flex: 1; */
            margin-left: 15px;

            div {
                margin-top: 20px;
                font-size: 14px;
                color: #666;
                margin-left: 10px;
            }

            .label {
                display: inline-block;
                width: 50px;
            }

        }

        .infoBox_left_title,
        .infoBox_right_title {
            font-size: 16px !important;
            display: flex;
            align-items: center;
            justify-content: start;
            margin-left: 0 !important;
            margin-bottom: 30px;
            padding-left: 10px;
            img {
                width: 30px;
                margin-right: 10px;
            }
        }

        .infoBox_left_title {
            color: #1296DB !important;
        }

        .infoBox_right_title {
            color: #E16531 !important;
        }
    }
    .empty{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 50px 0;
        color: #5e6d82;
        font-size: 14px;
        img{
            width: 200px;
        }
        
    }
</style>